/* eslint-disable react-compiler/react-compiler */
import { useState, useMemo } from 'react';
//import PropTypes from 'prop-types'
/* function Child({ count, onIncrement }) {
  return <button onClick={onIncrement}>子组件中的计数:{count}</button>
}
Child.propTypes = {
  count: PropTypes.number.isRequired,
  onIncrement: PropTypes.func.isRequired
}
function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => {
    setCount(count + 1);
  }
  return (
    <div>
      <h2>父组件</h2>
      <Child count={count} onIncrement={handleIncrement} />
    </div>
  )
} */
function useCache() {
  const cache = useMemo((size) => {
    let array = new Array(size)
    array.fill(Symbol.for("react.memo_cache_sentinel"));
    return array;
  }, []);
  return cache;
}
function Child(props) {
  const cache = useCache(3);
  const { count, onIncrement } = props;
  let buttonElement;
  if (cache[0] !== count || cache[1] !== onIncrement) {
    buttonElement = <button onClick={onIncrement}>子组件中的计数:{count}</button>
    cache[0] = count;
    cache[1] = onIncrement
    cache[2] = buttonElement;
  } else {
    buttonElement = cache[2];
  }
  return buttonElement;
}
function Counter() {
  //初始化缓存
  const cache = useCache(6);
  //初始化状态
  const [count, setCount] = useState(0);
  let handleIncrement;
  if (cache[0] !== count) {
    handleIncrement = () => {
      setCount(count + 1);
    };
    cache[0] = count;
    cache[1] = handleIncrement;
  } else {
    handleIncrement = cache[1];
  }
  //缓存标题元素
  let titleElement;
  if (cache[2] === Symbol.for("react.memo_cache_sentinel")) {
    titleElement = <h2>父组件</h2>;
    cache[2] = titleElement;
  } else {
    titleElement = cache[2];
  }
  //代表整个返回的JSX
  let containerElement;
  if (cache[3] !== count || cache[4] !== handleIncrement) {
    containerElement = (
      <div>
        {titleElement}
        <Child count={count} onIncrement={handleIncrement} />
      </div>
    )
    cache[3] = count;
    cache[4] = handleIncrement;
    cache[5] = containerElement;
  } else {
    containerElement = cache[5];
  }
  return containerElement;
}
export default Counter;


/**
function Child(t0) {
  const $ = _c(3);
  const { count, onIncrement } = t0;
  let t1;
  if ($[0] !== count || $[1] !== onIncrement) {
    t1 = <button onClick={onIncrement}>子组件中的计数:{count}</button>;
    $[0] = count;
    $[1] = onIncrement;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  return t1;
}
function Counter() {
  const $ = _c(6);
  const [count, setCount] = useState(0);
  let t0;
  if ($[0] !== count) {
    t0 = () => {
      setCount(count + 1);
    };
    $[0] = count;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  const handleIncrement = t0;
  let t1;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = <h2>父组件</h2>;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  let t2;
  if ($[3] !== count || $[4] !== handleIncrement) {
    t2 = (
      <div>
        {t1}
        <Child count={count} onIncrement={handleIncrement} />
      </div>
    );
    $[3] = count;
    $[4] = handleIncrement;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  return t2;
}

 */